<template>
	<div class="bg-color" v-if="showDetails">
		<top-bar title="申请详情" open="10">
			<div slot="rightItem"></div>
		</top-bar>
		<div @click="close" v-if="bntShow" class="bnts"><van-icon name="arrow-left" class="icons"/></div>
		<div class="details-title">
			{{title}}
			<img class="staus-img" :src="imgStatus(baseObj.system_handle_status)" />
		</div>
		<!-- 固定三个 -->
		<van-cell title="编号" :border="false" :value="baseObj.big_id" />
		<van-cell title="提交人(ERP)" :border="false" :value="baseObj.create_admin_relname+'('+baseObj.create_admin+')'" />
		<van-cell title="提交时间" :border="false" :value="baseObj.create_datetime" />
		<!-- 分组 -->
		<div class="group" v-for="(value,key,index) in dataObj" :key="index">
			<div class="group-title">{{key | changeKey}}</div>
			<div v-for="(item,index) in value" :key="index">
				<van-cell v-if="item.type !== '2'" :title="item.name">
					<template #default v-if="item.type === '92'">
						<div v-for="(value2,key2,index2) in fileShowObj" :key="index2">
							<div v-if="item.name === key2">
								<p style="color: #1989FA;" v-for="(item_file,index3) in value2.child" @click="downLoadFile(item_file)" :key="index3">{{item_file.fileName}}</p>
							</div>
						</div>
					</template>
					<template #default v-else-if="item.type === '104'">
						<span>{{item.value | changeStr}}</span>
					</template>
					<template #default v-else>
						<span class="deep" v-html="intercept(item)"></span>
					</template>
				</van-cell>
				<van-collapse v-if="item.type === '2'" v-model="activeNames">
					<van-collapse-item :title="item.name" :name="index">
						<pre class="pre">{{item.value}}</pre>
					</van-collapse-item>
				</van-collapse>
			</div>
		</div>
		<!-- 子表展示 -->
		<div v-for="(value,key,index) in small_tables">
			<div class="group-title kong" v-if="value.length!==0">{{key}}</div>
			<sub-table :disabled="true" v-for="(item,index) in value" :item="item" :index_table="index"></sub-table>
		</div>
		<!-- 步骤条 -->
		<div class="steps-out">
			<!-- <default-steps :smallObj="baseObj"></default-steps> -->
			<steps v-for="item in recordsList" :recordsData="item"></steps>
		</div>
		<!-- 遮罩 -->
		<div class="ww"></div>
		<!-- 按钮 -->
		<bnt :workFlowData="workFlowData" :outObj="outObj" ></bnt>		
	</div>
</template>

<script>
	import topBar from '@components/topBar.vue'
	import steps from '@components/steps.vue'
	import defaultSteps from '@components/defaultSteps.vue'
	import bnt from '@components/bnt.vue'
	import subTable from '@components/assemblys/subTable.vue'
	import {
		ImagePreview
	} from 'vant';
	import {
		getDetail,
		openFile,
		downLoadFile
	} from '@request/api.js'
	import {
		character
	} from '@request/character.js'
	export default {
		data() {
			return {
				recordsList: [],
				baseObj: {},
				dataObj: {},
				workFlowData: {},
				fileShowList: [],
				fileShowObj: {},
				activeNames: [0],
				showDetails: false,
				small_tables: [],
				title:'',
				outObj:{},
				bntShow:false,
			}
		},
		filters: {
			changeKey(key) {
				if (key === '无') {
					return '业务信息'
				} else {
					return key
				}
			},
			changeStr(str){
				return str.replace(/》/g, '-');
			}
		},
		computed: {
			intercept() {
				return function(val) {
					if (val.name === '申请人部门') {
						let arr = val.value.split("-")
						const {
							length,
							last = length - 1
						} = arr
						const lastItem = arr[last]
						return lastItem
					} else {
						return val.value
					}
				}
			},
			imgStatus() {
				return function(val) {
					if (val == 1) {
						return require('@assets/img/tonguo.jpg')
					} else if (val == 2) {
						return require('@assets/img/reject.jpg')
					} else if (val == 3) {
						return require('@assets/img/wait.jpg')
					} else if (val == 4) {
						return require('@assets/img/quxiao.jpg')
					} else {
						return require('@assets/img/caogao.jpg')
					}
				}
			}
		},
		methods: {
			close(){
				this.$cookie.set('name','xixi')
				jme.browser.closeWeb();
			},
			downLoadFile(file) {
				let u = navigator.userAgent
				let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if (isAndroid) {
					if (file.contentType.includes('image')) {
						ImagePreview({
							images: [
								`data:${file.contentType};base64,${file.url}`
							],
							onClose() {
								// alert('关闭');
							},
						});
						var options = {
							image: `data:${file.contentType};base64,${file.url}`,
							imageName: file.fileName,
							success: function(res) {
								alert(JSON.stringify(res));
							}
						}
						jme.album.saveImage(options)
					} else {
						this.$toast('安卓系统不支持该文件格式，请登录PC端操作')
					}
				}
				if (isIOS) {
					var options = {
						'downloadUrl': '',
						'filePath': `data:${file.contentType};base64,${file.url}`,
						'name': file.fileName,
						'size': file.size,
						'type': file.type,
						callback: function(res) {
							alert(JSON.stringify(res));
						}
					};
					jme.file.openDocument(options);
				}
			},
			annexList(val) {
				if (val.file && val.file !== '') {
					let arr = val.file.split(":")
					let fileItemList = []
					arr.forEach(item => {
						let arr2 = item.split("|")
						fileItemList.push({
							fileName: arr2[1],
							url: arr2[0],
							fieldName: val.fieldName,
							name: val.name
						})
					})
					fileItemList.forEach(item => {
						this.base64(item)
					})
				}
			},
			async base64(item) {
				let arr = item.fileName.split(".")
				let fileName
				if (item.fileName.length >= 25) {
					fileName = `${item.fileName.slice(0,18)}.${arr[arr.length-1]}`
				} else {
					fileName = item.fileName
				}
				await openFile({
					'_form': this.$route.query.fromId,
					'_num': this.$route.query.num,
					'_fieldName': item.fieldName,
					'_filePath': item.url
				}).then(res => {
					this.fileShowList.push({
						url: res.base64,
						fileName: fileName, //文件名称
						name: item.name,
						size: res.size,
						type: res.ext,
						'_fieldName': item.fieldName,
						'_filePath': item.url,
						'contentType': res.contentType
					})
					this.changeList(this.fileShowList)
				})
			},
			changeList(list) {
				this.fileShowObj = {}
				list.forEach((item, index) => {
					let {
						name
					} = item;
					if (!this.fileShowObj[name]) {
						this.fileShowObj[name] = {
							name,
							child: []
						}
					}
					this.fileShowObj[name].child.push(item);
				});
			},
			sortBykey(ary, key) {  //数组对象排序
				  return ary.sort(function (a, b) {
				    let x = a[key]
				    let y = b[key]
				    return ((x < y) ? -1 : (x > y) ? 1 : 0)
				  })
			},
			handleList(obj) {
				if (Object.keys(obj) !== 0) {
					let bigObj = {}
					for (let k in obj) {
						let list = []
						obj[k].formDataList.forEach(i => {
							let obj2 = {}
							let arr = []
							for (let x in i) {
								obj[k].fieldLists.forEach((item,index) => {
									if (item.fieldName === x) {
										arr.push({
											name: item.name,
											value: i[x],
											index
										})
									}
								})
								const list2 = this.sortBykey(arr,'index')
								this.$set(obj2, '无', list2)
							}
							list.push(obj2)
						})
						this.$set(bigObj, k, list)
					}
					return bigObj
				}
			}						
		},
		created() {	
			if(this.$route.query.lk&&this.$route.query.lk === 'xq'){
				this.bntShow = true				
			}			
			getDetail({
				'_form': this.$route.query.fromId,
				'_num': this.$route.query.num
			}).then(res => {
				if (res.code === 0) {
					this.showDetails = true
					this.outObj = res
					this.title = res.form_simple_title
					this.baseObj = res.formData
					if (Object.keys(res.formData.fields).length !== 0) {
						this.dataObj = res.formData.fields
					}
					this.workFlowData = res.formData.workFlowData
					this.recordsList = res.processing_records;
					if (res.small_tables) {
						this.small_tables = this.handleList(res.small_tables)
					}

					//处理附件
					for (let key in this.dataObj) {
						let arr = this.dataObj[key]
						arr.forEach(item => {
							if (item.type === '92') {
								this.annexList(item)
							}
						})
					}
				} else if (res.code === 500 && res.msg === "对不起，您无权限查看!") {
					// alert(1)
					this.$router.back()
				}
			})
		},
		components: {
			topBar,
			steps,
			bnt,
			defaultSteps,
			subTable
		}
	}
</script>

<style lang="scss" scoped>
	.deep {
		/deep/ .label {
			color: #FFFFFF !important;
			padding: vw(3) vw(8);
		}
	}

	.bg-color {
		background-color: $bg-1;
	}

	.details-title {
		font-size: vw(18);
		font-weight: 550;
		border-bottom: vw(1) solid $line-1;
		padding: vw(20) vw(12);
		background-color: #FFFFFF;
		position: relative;
	}

	.group-title {
		font-weight: 550;
		font-size: vw(16);
		border-bottom: vw(1) solid $line-1;
		padding: vw(12) vw(12);
		background-color: #FFFFFF;
	}

	.kong {
		margin-top: vw(12);
	}

	.group {
		margin-top: vw(12);
	}

	.staus-img {
		width: vw(69);
		height: vw(69);
		position: absolute;
		right: vw(10);
		top: 0;
		z-index: 3;
	}

	.steps-out {
		background-color: #FFFFFF;
		margin-top: vw(12);
		padding-top: vw(12);
	}

	.ww {
		width: 100%;
		height: vw(30);
		background-color: #FFFFFF;
		margin-top: vw(-12);
		z-index: 2;
		position: relative;
	}

	.van-cell {
		padding: vw(6) 16px;

		/deep/ .van-cell__title {
			color: #969799;
			font-size: vw(13);
			flex: 1 !important;
		}

		/deep/ .van-cell__value {
			color: #323233;
			font-size: vw(13);
			flex: 2 !important;
		}
	}

	.van-collapse {
		/deep/ .van-cell__title {
			color: #969799;
			font-size: vw(13);
		}

		/deep/ .van-collapse-item__content {
			color: #323233;
			font-size: vw(13);
		}
	}

	.pre {
		font-size: vw(13);
		color: #323232;
		width: 100%;
		word-break: break-word;
		white-space: pre-wrap;
	}
	.bnts{
		width: 48px;
		height: 48px;
		line-height: 62px;
		background-color: #F5FBFC;
		// background-color: red;
		position: fixed;
		top: 30px;
		left: 10px;
		z-index: 1000;
	}
	.icons{
	    font-size: vw(24);
	}
</style>
